<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Tests — Base</title>
  <link rel="stylesheet" href="../styles.css" />
</head>

<body>
  <main>
    <h1>Tests — Base</h1>
    <button class="link-like" data-a11y-dialog-show="my-dialog">
      <!-- Insert a needless span here to make sure delegated clicks work -->
      <span>Open the dialog window</span>
    </button>
    <button class="link-like" data-a11y-dialog-show="shadow-dialog">
      Open the shadow dialog
    </button>
    <button class="link-like" data-a11y-dialog-show="focusable-shadow-host-dialog">Open the focusable shadow host
      dialog</button>
  </main>

  <div class="dialog" data-a11y-dialog="my-dialog" aria-labelledby="my-dialog-title">
    <div class="dialog-overlay" data-a11y-dialog-hide></div>
    <div class="dialog-content" role="document">
      <button data-a11y-dialog-hide id="close-my-dialog" class="dialog-close"
        aria-label="Close this dialog window">&times;</button>

      <h1 id="my-dialog-title">Dialog title</h1>

      <form>
        <label for="email">Email (required)</label>
        <input type="email" name="EMAIL" id="email" placeholder="john.doe@gmail.com" required>
        <button type="submit" name="button">Sign up</button>
      </form>

      <button type="button" id="move-focus-outside">Move focus outside</button>
    </div>
  </div>
  <div class="dialog" data-a11y-dialog="shadow-dialog" aria-labelledby="shadow-dialog-title">
    <div class="dialog-overlay" data-a11y-dialog-hide></div>
    <div class="dialog-content" role="document">
      <fancy-button data-a11y-dialog-hide id="close-shadow-dialog" class="dialog-close"
        aria-label="Close shadow dialog">
        &times;
      </fancy-button>

      <h1 id="shadow-dialog-title">Dialog with shadow children</h1>
      <fancy-card>
        <h2 style="margin-block-start: 0">A fancy card</h2>
        <p>I'm Light DOM text</p>
        <a href="#" class="link-like">I'm a Light Dom link</a>
      </fancy-card>
    </div>
  </div>
  <div class="dialog" data-a11y-dialog="focusable-shadow-host-dialog"
    aria-labelledby="focusable-shadow-host-dialog-title">
    <div class="dialog-overlay" data-a11y-dialog-hide></div>
    <div class="dialog-content" role="document">
      <fancy-button data-a11y-dialog-hide id="close-focusable-shadow-host-dialog" class="dialog-close"
        aria-label="Close focusable shadow host dialog">
        &times;
      </fancy-button>

      <h1 id="focusable-shadow-host-dialog-title">Dialog with an focusable shadow host</h1>
      <a href="#" class="link-like">A link</a>
      <fancy-div tabindex="0">
        I'm a focusable Shadow Dom element, and I'm last in the DOM!
      </fancy-div>
    </div>
  </div>

  <div data-a11y-dialog-ignore-focus-trap>
    <button type="button" id="focus-me">Focus me</button>
  </div>

  <script src="./a11y-dialog.js"></script>
  <script src="./shadow-dom-fixture.js"></script>
  <script>
    document.querySelector('#move-focus-outside').addEventListener('click', () => {
      document.querySelector('#focus-me').focus()
    })
  </script>
</body>

</html>
